<!-- 河长主页 -->
<template>
  <div class="work">

    <!-- 基础数据 -->
    <div class="base-data">

      <!-- 用户数据 -->
      <user-area style="min-width:307px" />

      <!-- 本月考核分数 -->
      <!-- 所有角色都不给看，以防后面改动遂注释 by lxn 2021-0302 -->s
      <!-- <examine-point v-if="isCity" style="margin-left:10px" /> -->

      <!-- 待处理事件 -->
      <to-do-event style="margin-left:10px" />

      <!-- 本月巡查次数 -->
      <patrol-count style="margin-left:10px" />

      <!-- 所属河流事件 -->
      <river-event style="margin-left:10px" />

      <!-- 重点项目 -->
      <key-project style="margin-left:10px" />

    </div>

    <!-- 可视化数据 -->
    <div class="visual-data">

      <div class="visual-area">

        <!-- 图表区域 -->
        <div class="chart-area">

          <!-- 事件处理统计 -->
          <event-handle-statistics />

          <!-- 河流事件统计 -->
          <river-event-statistics style="margin-left:10px" />

        </div>

        <!-- 地图 -->
        <map-box />

      </div>

      <!-- 最新消息 -->
      <hot-message />

    </div>

  </div>
</template>

<script>
import UserArea from './UserArea';
import ExaminePoint from './ExaminePoint';
import ToDoEvent from './ToDoEvent';
import PatrolCount from './PatrolCount';
import RiverEvent from './RiverEvent';
import KeyProject from './KeyProject';
import EventHandleStatistics from './EventHandleStatistics';
import RiverEventStatistics from './RiverEventStatistics';
import MapBox from './MapBox';
import HotMessage from '../common/HotMessage';
import storage from 'good-storage';

export default {
  components: {
    'user-area': UserArea,
    'examine-point': ExaminePoint,
    'to-do-event': ToDoEvent,
    'patrol-count': PatrolCount,
    'river-event': RiverEvent,
    'key-project': KeyProject,
    'event-handle-statistics': EventHandleStatistics,
    'river-event-statistics': RiverEventStatistics,
    'map-box': MapBox,
    'hot-message': HotMessage,
  },
  data() {
    return {
      isCity: false // 是否市级河长/河长办
    }
  },
  mounted() {
    let department = JSON.parse(storage.session.get('department'));
    let type = storage.session.get('type');
    let areas = [undefined, null, ''];
    let types = ['3', '4', '7', '8'];
    this.isCity = areas.includes(department[0].area) && types.includes(type) ? true : false;

    storage.session.set('isWork', true);
  }
};
</script>

<style lang="less" scope>
.work {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .base-data {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .visual-data {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    .visual-area {
      height: 100%;
      flex: 0 1 auto;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: stretch;

      .chart-area {
        flex: 0 0 auto;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>